<script setup>
import { watch } from 'vue';

const emit = defineEmits(['toggle']);
const props = defineProps({
  open: {
    type: Boolean,
    default: true,
  },
});
</script>

<template>
  <details
    :open="props.open"
    class="base-details"
    @toggle="event => emit('toggle', event.currentTarget.open)">
    <summary>
      <slot name="header"></slot>
    </summary>

    <slot></slot>
  </details>
</template>

<style>
.base-details {
  position: relative;
  height: auto;
  padding-bottom: 8px;
  border-left: 1px solid rgb(228,228,228);
  background: #fff;
}

.base-details[open] { flex: 1; }

.base-details > summary {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding-left: 6px;
  padding-right: 12px;
  border-bottom: 1px solid rgb(228,228,228);
}

.base-details .fn {
  display: flex;
  gap: .8em;
  justify-content: flex-end;
  margin-left: auto;
  height: 40px;
}

.base-details > summary::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border: .4em solid transparent;
  border-left-color: currentColor;
  text-align: center;
  transform: translateX(25%) scale(1.25, .75);
}

.base-details[open] > summary::before {
  content: '';
  border-left-color: transparent;
  border-top-color: currentColor;
  transform: translate(-10%, 25%) scale(1);
}

.base-details .ant-btn {
  width: auto;
  height: auto;
  padding-left: 4px;
  padding-right: 4px;
  border: 0;
  background: transparent;
}
.base-details .ant-btn:focus { color: unset; }
</style>
